<template>
  <div style="margin:30px">
    <p class="font">客户报价单管理</p>
    <el-form ref="form" :model="form" label-width="80px" size="mini" :inline="true">
      <el-form-item label="客户名称:">
        <el-input v-model="form.fullName" />
      </el-form-item>
      <!-- <el-form-item label="全称:">
        <el-input v-model="form.fullName" />
      </el-form-item> -->
      <!-- <el-form-item label="纸板名称:">
        <el-input v-model="form.paperName" />
      </el-form-item> -->
    </el-form>
    <el-button size="mini" type="primary" @click="query">查询</el-button>
    <el-button type="primary" size="mini" @click="add">新增报价单</el-button>
    <el-button type="success" size="mini" @click="toExcel">Excel导出</el-button>
    <el-button type="warning" size="mini" @click="print">批量打印</el-button>
    <el-table
      ref="table"
      :data="tableData"
      tooltip-effect="dark"
      border
      stripe
      style="width:62% "
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="fullName" label="客户名称" width="120" />
      <el-table-column prop="paperName" label="纸板名称" width="120" />
      <el-table-column prop="boxType" label="箱型" width="120" />
      <el-table-column prop="squaredPrice" label="销售平方价(元)" width="120" />
      <el-table-column prop="boxPrice" label="箱型计价" width="120" />
      <el-table-column prop="totalPrice" label="总价(元)" width="120" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="updated(scope.row.id)">编辑</el-button>
          <el-button type="success" size="mini" @click="singlePrint(scope.row)">打印</el-button>
          <el-popconfirm title="内容确定删除吗？" @onConfirm="deleted(scope.row.id)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="form.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="form.count"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <addDialog :id="id" :dialog="addDialog" @init="initTable" /></div>
</template>

<script>
import addDialog from '@/views/basicdata/customerquotation/add'
import { getCustomerQuotation, delCustomerQuotation } from '@/api/basedata/customerquotation'
import { export2Excel } from '@/utils/common'
export default {
  components: { addDialog },
  data() {
    return {
      id: '',
      tableData: [],
      select: [],
      addDialog: {
        show: false
      },
      total: 0,
      form: {
        page: 1,
        count: 10,
        limitPaperLength: false
      },
      disable: false

    }
  },
  created() {
    this.initTable()
  },
  methods: {
    print() {
      if (this.select.length === 0) {
        this.select = this.tableData
      }
      this.$router.push({
        path: '/customerquotationprint',
        query: this.select
      })
    },
    handleSelectionChange(select) {
      this.select = select
    },
    singlePrint(row) {
      var list = []
      list.push(row)
      this.$router.push({
        path: '/customerquotationprint',
        query: list
      })
    },
    handleSizeChange(size) {
      this.size = this.form.count
      this.initTable()
    },
    handleCurrentChange(page) {
      this.page = this.form.page
      this.initTable()
    },
    initTable() {
      getCustomerQuotation(this.form).then(res => {
        if (res.totalPrice !== null && res.boxType !== null) {
          this.disable = true
        } else {
          this.disable = false
        }
        this.tableData = res.list
        // this.tableData.forEach(x => {
        //   var res = this.duplicate(x.paperName)
        //   x.paperName = res.join(',')
        // })
        this.total = res.total
      })
    },
    deleted(id) {
      delCustomerQuotation(id).then(res => {
        if (res) {
          this.initTable()
          this.$message.success('删除成功')
        } else {
          this.$message.success('删除失败')
        }
      })
    },
    add() {
      this.id = ''
      this.addDialog.show = true
    },
    updated(id) {
      this.id = id
      this.addDialog.show = true
    },
    query() {
      this.initTable()
    },
    toExcel() {
      var list = this.tableData
      const th = ['客户名称', '纸板名称', '箱型', '销售平方价(元)', '箱型计价', '总价(元)']
      const filterVal = ['fullName', 'paperName', 'boxType', 'squaredPrice', 'boxPrice', 'totalPrice']
      const data = list.map(v => filterVal.map(k => v[k]))
      export2Excel(th, data, '客户报价单管理')
    },
    duplicate(arr) {
      var json = {}; var res = []
      for (var i = 0; i < arr.length; i++) {
        if (!json[arr[i]]) {
          json[arr[i]] = true
          res.push(arr[i])
        }
      }
      return res
    }
  }

}
</script>

<style scoped>
.font{
  font-weight: bold;
  width:400px;
  height: 100px;
  line-height: 100px;
  font-size: 30px;
  font-family: 'Courier New', Courier, monospace;
  /* text-align: center; */
  margin-left: 40%;
  margin-bottom: 0%;
}

</style>
<style media="print">
  body {
    border: solid 1px #ffffff;
    margin:0;
  }
</style>
